<template>
  <FModal header="请选择关联单据" @ok="ok" width="1200"
          body-height="600" ref="refFModal">
    <FPage>
      <template #header>
        动态搜索条件
      </template>

      <el-table height="100%" border :default-sort="sortConfig" @row-click="rowClick"
                @current-change="handleCurrentChange"
                :data="dataSource" @sort-change="sortChange" @selection-change="selectionChange"
                v-loading="loading" ref="refTable" row-key="id" highlight-current-row>
        <el-table-column show-overflow-tooltip sortable
                         v-for="field in columns" :label="field.title">
          <template #default="{row}">
            {{ row[field.dataIndex] }}
          </template>
        </el-table-column>
      </el-table>
      <template #footer>
        <div style="padding: 5px; display: flex; justify-content: end">
          <el-pagination
            v-model:current-page="pagination.current"
            v-model:page-size="pagination.size"
            :page-sizes="pageOptions"
            background layout="total, sizes, prev, pager, next, jumper"
            :total="pagination.total" small
            @size-change="search"
            @current-change="pageChange"
          />
        </div>
      </template>
    </FPage>
  </FModal>
</template>
<script setup>
import FModal from '@/components/FModal/index.vue';
import {ref, shallowRef} from 'vue';
import TableSearchUtils from '@/utils/TableSearchUtils';
import FPage from '@/components/layout/FPage.vue';
import {isEmpty, real} from '@/utils/CommonUtils';
import {postAction} from '@/request/BaseRequest';
import {ElMessage} from 'element-plus';

const refTable = shallowRef();
const refFModal = shallowRef();
const searchParams = ref({});
const columns = shallowRef([]);
const selectedRowKey = shallowRef();
let formData = undefined;
let relation = undefined;
const emit = defineEmits(['ok']);

function setData(data) {
  formData = data.formData;
  relation = data.relation;
  refFModal.value.open();
  loadRelationData(real(formData), real(relation));
}

function loadRelationData(formData, relation) {
  loading.value = true;
  postAction('/plat/platRelation/loadRelationData', {
    formData,
    relationId: relation.id
  }).then(data => {
    loading.value = false;
    if (data.success) {
      let result = data.result;
      columns.value = result.columns;
      setSearchResult({
        current: 1,
        size: 10,
        total: result.records.length,
        records: result.records,
      });
    }
  });
}

const searchForm = {
  value: {
    validate(call) {
      call(true);
    },
  }
};

function doSearch() {
  loadRelationData(real(formData), real(relation));
}

function onRowClick() {

}

function selectedRowKeysChange() {
  console.log('selectedRowKeysChange');
  let list = [...selectedRowKeys.value];
  if (list.length > 1) {
    console.log(list, [list[list.length - 1]]);
    debugger;
    selectedRowKeys.value = [list[list.length - 1]];
  }
}

function handleCurrentChange(row) {
  selectedRowKey.value = row.id;
}

function ok() {
  if (isEmpty(real(selectedRowKey))) {
    ElMessage({
      message: '请选择关联单据',
      type: 'warning',
    });
    return;
  }
  let relationParams = {
    relationDataId: real(selectedRowKey),
    relationId: relation.id,
  };

  doRelation(relationParams);
}

function doRelation(relationParams) {
  emit('ok', relationParams);
}

function onSelection(rows) {
}

const {
  loading, rowClick, search, selectionChange, setSearchResult, pageOptions, pageChange,
  sortChange, dataSource, resetQueryParams, sortConfig, selectedRows, pagination
} = TableSearchUtils({
  refForm: searchForm,
  doSearch,
  defaultSortConfig: {
    prop: undefined,
    order: undefined,
  },
  searchParams,
  selectionChange: onSelection,
  rowClick: onRowClick
});

defineExpose({
  setData
});
</script>
<script>
export default {
  name: 'FormRelationSelector',
};
</script>
<style>

</style>
